import React, { useEffect } from 'react'
import { Cascader } from 'antd'
import { useDispatch } from 'react-redux'
import useGetAllConfig from '~/hooks/useGetAllConfig'
import { setGlobalItem } from '~/actions/global.action'
import { useSelector } from 'react-redux'
import { AppState } from '~/stores'

const ItemClassification = ({ value = [], onChange, disabled, ...props }: any) => {
  const { data } = useGetAllConfig()
  const { itemData } = useSelector((state: AppState) => state.globalReducer)
  const dispatch = useDispatch()
  useEffect(() => {
    if (itemData) return
    dispatch(
      setGlobalItem({
        itemData: data
      })
    )
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data])

  return (
    <Cascader
      disabled={!!disabled}
      value={value}
      onChange={itemClassification => {
        onChange(itemClassification)
      }}
      options={data && data.itemCategory}
      placeholder="请选择物品分类"
      {...props}
    />
  )
}

export default ItemClassification
